<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 180px;
            height: 240px;
            font-size: 16px;
            background-color: #7dff51;
        }
    </style>
    <script>
        window.onload = function () {
            //需求：点击>>>左边的所有选项全部进入右边，
                 //点击<<<右边的所有选项全部进入左边。
            //思路：获取所有的子元素，然后直接添加到另一侧。

            //获取相关元素
            var sel1 = document.getElementById("sel1");
            var sel2 = document.getElementById("sel2");
            var btnArr = document.getElementsByTagName("button");

            //绑定事件
            btnArr[0].onclick = function () {
                //获取左侧的select标签的所有子元素
                var arr = sel1.children;
                //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
                for(var i=arr.length-1;i>=0;i--){
                    //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
                    //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
                    sel2.appendChild(arr[arr.length-1-i]);
                }
            }

//            btnArr[1].onclick = function () {
//                //获取左侧的select标签的所有子元素
//                var arr = sel2.children;
//                //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
//                for(var i=arr.length-1;i>=0;i--){
//                    //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
//                    //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
//                    sel1.appendChild(arr[arr.length-1-i]);
//                }
//            }
        }
    </script>
</head>
<body>
    <select name="" size="10" id="sel1" multiple>
        <option value="">香蕉</option>
        <option value="">苹果</option>
        <option value="">鸭梨</option>
        <option value="">葡萄</option>
    </select>
    <button>>>></button>
    <button><<<</button>
    <button>></button>
    <button><</button>
    <select name="" size="10" id="sel2" multiple>

    </select>
</body>
</html>